<template>
  <layout-view>
    <template #content>
      <div class="banner">
        <el-carousel trigger="click" height="50vh">
          <el-carousel-item v-for="ad in adList" :key="ad.id">
            <el-image style="width: 100%; height: 100%" :src="baseImage+ad.src" fit="fill"></el-image>
          </el-carousel-item>
        </el-carousel>
      </div>
      <div class="group">
        <book-list :book-list="hotList"/>
      </div>
    </template>
  </layout-view>
</template>

<script>
import LayoutView from '@/components/LayoutView.vue'
import BookList from '@/components/BookList.vue'

export default {
  name: 'IndexView',
  components: { LayoutView, BookList },
  data () {
    return {
      baseImage: process.env.VUE_APP_URL,
      adList: [],
      hotList: []
    }
  },
  methods: {
    getAdList () {
      this.$http.get('api/v1/banner/list').then(data => {
        if (data) {
          this.adList = [...data]
        }
      }).catch(() => {})
    },
    getHotList () {
      this.$http.get('api/v1/book/hot/list').then(data => {
        if (data) {
          this.hotList = [...data]
        }
      }).catch(() => {})
    }
  },
  created () {
    this.getAdList()
    this.getHotList()
  }
}
</script>

<style scoped lang="scss">
.group{
  width: 980px;
  margin: 20px auto;
  background-color: whitesmoke;
}
</style>
